<template>
  <!-- 点位 -->
  <div>
    <!-- 搜索框 -->
    <div class="search">
      <form class="el-form el-form--inline">
        <div class="el-form-item el-form-item--medium">
          <label class="el-form-item__label">点位搜索：</label>
          <div class="el-form-item__content">
            <div class="el-input el-input--medium el-input--suffix">
              <input
                type="text"
                autocomplete="off"
                placeholder="请输入"
                class="el-input__inner"
              />
            </div>
          </div>
        </div>
        <div class="el-form-item el-form-item--medium">
          <label class="el-form-item__label">区域搜索：</label>
          <div class="el-form-item__content">
            <div class="el-select el-select--medium">
              <!---->
              <div class="el-input el-input--medium el-input--suffix">
                <!----><input
                  type="text"
                  autocomplete="off"
                  placeholder="请选择"
                  class="el-input__inner"
                  readonly="readonly"
                /><span class="el-input__suffix"
                  ><span class="el-input__suffix-inner"
                    ><i
                      class="el-select__caret el-input__icon el-icon-arrow-up"
                      style=""
                    ></i></span
                ></span>
              </div>
            </div>
          </div>
        </div>
        <div class="el-form-item el-form-item--medium">
          <!---->
          <div class="el-form-item__content">
            <button
              type="button"
              class="el-button el-button--primary2 el-button--primary el-button--medium"
            >
              <!----><!----><span
                ><svg
                  version="1.1"
                  viewBox="0 0 1024 1024"
                  class="svg-icon svg-fill"
                  style="width: 16px; height: 16px"
                >
                  <defs></defs>
                  <path pid="0" d="" _fill="#FFF"></path></svg
                >&nbsp;&nbsp;查询
              </span></button
            ><!---->
          </div>
        </div>
      </form>
    </div>
    <div class="box">
      <!-- 按钮 -->
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="open('add')">新建</el-button
      >
      <!-- 列表 -->
      <template>
        <el-table style="width: 100%" :data="params">
          <el-table-column label="序号" type="index" width="100"></el-table-column>
          <el-table-column  label="点位名称" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column  label="所在区域" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.region.name }}</span>
            </template>
          </el-table-column>
          <el-table-column  label="商圈类型">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.businessType.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="合作商">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.ownerName }}</span>
            </template>
          </el-table-column>
          <el-table-column  label="详细地址">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.region.remark }}</span>
            </template>
          </el-table-column>
          <el-table-column  label="操作">
            <template  slot-scope="scope">
            <el-button size="mini" @click="Poindetails(scope.row.id)">查看详情</el-button>
            <el-button size="mini" @click="open('edit',scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="Pointedit(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 新增的和修改的复用 -->
    <template>
    <el-dialog
     :title="title"  :visible.sync="PointDialogVisible"   width="30%" center >
    <el-form label-width="110px"  :model="form" :rules="rules">
      <el-form-item  label="点位名称:" prop="name">
        <el-input v-model="form.name"  placeholder="请输入" />
      </el-form-item>
       <el-form-item label="所在区域:" prop="name">
       <el-select v-model="submitList.regionId" placeholder="请选择">
    <el-option  v-for="item in districtList"
            :key="item.id"
            :label="item.remark"
            :value="item.id">
    </el-option>
  </el-select>
      </el-form-item>
     <el-form-item label="所属商圈:" prop="name" >
       <el-select v-model="form.businessType" placeholder="请选择">
        <el-option
            v-for="item in listres"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
    <el-option>
    </el-option>
  </el-select>
      </el-form-item>
      <el-form-item   label="归属合作商:"  prop="name">
       <el-select v-model="form.ownerName" placeholder="请选择" size="100%">
    <el-option  v-for="item in params"
            :key="item.id"
            :label="item.ownerName"
            :value="item.ownerName">
    </el-option>
  </el-select>
      </el-form-item>
       <el-form-item label="详细地址:"  prop="name" >
    <textarea  v-model="form.addr" placeholder="请输入备注(不超过40字)"  style="min-height: 33px; height: 163px; width:396px"></textarea>
    </el-form-item>
    </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="PointDialogVisible = false">取 消</el-button>
    <el-button type="warning" @click="submit()">确 定</el-button>
  </span>
</el-dialog>
   </template>
  <div class="page-turner">
    <div class="text">
      <p>共{{ this.totalLIst.totalCount }}条记录</p>
      <p>第 {{this.totalLIst.pageIndex}}/{{  this.totalLIst.totalPage}} 页</p>
    </div>
    <el-row>
      <el-button plain :disabled="boxList.pageIndex===1?true:false" @click="change('previous')">上一页</el-button>
      <el-button plain :disabled="boxList.pageIndex>totalLIst.totalPage-1" @click="change('next')">下一页</el-button>
    </el-row>
  </div>
  <!-- ====================================== -->
  <el-dialog title="区域详情" :visible.sync="centerDialogVisible" width="700" close="hidden"   >
      <el-table :data="details">
    <el-table-column type="index"  label="序列号" width="100"> </el-table-column>
     <el-table-column
      label="设备编号"
      width="100"
      prop="innerCode"
      >
    </el-table-column>
    <el-table-column
    prop="vmStatus"
      label="设备状态"
      width="300">

    </el-table-column>
     <el-table-column
     prop="lastSupplyTime"
      label="最后一次供货时间"
      width="300">

    </el-table-column>
  </el-table>
</el-dialog>
  </div>
</template>

<script>
import { PointList, Pointedit, PointPartnersList, Regional, Pointadd, Pointmodify, Poindetails } from '@/api/poinGG'

export default {

  name: 'point-page',
  data() {
    return {
      // 列表总数据
      params: [],
      totalLIst: [],
      boxList: {
        pageIndex: 1,
        pageSize: 10
      },
      PointDialogVisible: false,
      form: {
        addr: '',
        areaCode: '',
        businessId: 1,
        createUserId: 1,
        name: '',
        ownerId: 1,
        ownerName: '',
        regionId: '',
        remark: '',
        businessType: ''
      },
      rules: {
        name: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { min: 2, max: 16, message: '长度在1-16之间', trigger: 'blur' }
        ]
      },
      listres: {},
      listres1: {},
      districtList: {},
      title: '',
      formList: {},
      submitList: {
        addr: '',
        areaCode: 130100,
        businessId: 1,
        createUserId: 1,
        name: '',
        ownerId: 1,
        ownerName: '',
        regionId: ''
      },
      // 详情
      details: {},
      centerDialogVisible: false
    }
  },
  created() {
    this.PointList()
  },
  methods: {
    // 删除
    async Pointedit(id) {
      try {
        await Pointedit(id)
        this.$message.success('删除成功')
        this.PointList()
      } catch (err) {
        console.log(err)
        this.$message.error('演示数据禁止删除')
      }
    },
    // 上一页||下一页
    change(value) {
      if (value === 'next') {
        this.boxList.pageIndex++
        this.PointList(this.boxList)
      } else if (value === 'previous') {
        this.boxList.pageIndex--
        this.PointList(this.boxList)
      }
    },
    // 点位列表渲染
    async PointList(value) {
      const res = await PointList(value)
      this.totalLIst = res
      this.params = res.currentPageRecords
    },
    // 新增||修改
    async open(value, row) {
      if (value === 'add') {
        this.title = '新增点位'
        this.PointDialogVisible = true
        this.boxList.pageSize = 1000
        const res = await Regional(this.boxList)
        this.districtList = res.currentPageRecords
        this.listres = await PointPartnersList()
      } else if (value === 'edit') {
        this.title = '修改点位'
        this.boxList.pageSize = 1000
        const res = await Regional(this.boxList)
        this.districtList = res.currentPageRecords
        this.listres = await PointPartnersList()
        this.PointDialogVisible = true
        this.form = { ...row }
        console.log(this.form.id)
      }
    },
    // 复用提交
    async submit(id) {
      this.submitList.addr = this.form.addr
      this.submitList.name = this.form.name
      this.submitList.ownerName = this.form.ownerName
      try {
        if (this.title === '新增点位') {
          await Pointadd(this.submitList)
          this.$message.success('新增成功')
          this.PointDialogVisible = false
          this.form = {}
        }
        if (this.title === '修改点位') {
          await Pointmodify(this.form.id, this.form)
          this.$message.success('修改成功')
          this.PointDialogVisible = false
          this.form = {}
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 查看详情
    async Poindetails(id) {
      this.details = await Poindetails(id)
      this.centerDialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.page-turner {
  width: 100%;
  height: 100px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text {
    display: flex;
    p {
      margin: 10px;
      font-size: 16px;
      color: #dbdfe5;
    }
  }
  .el-row {
    .el-button {
      margin: 0 15px;
    }
  }
}
</style>
